<template>
    <div style="height: 100vh" class="common-layout">
        <el-container>
        <el-header style="background-color:#e3f2fd;"><NavBar/></el-header>
        <el-container>
            <el-aside width="18vw" style="height:93vh;background-color: #E2E4E6;padding: 0;">
                <el-row class="tac">
                <el-col :span="24">
                    <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    router
                    :default-openeds="openeds"
                    >
                    <el-menu-item index="">
                        <el-icon><icon-menu /></el-icon>
                        <span> <router-link :to="{name:'home'}" class="nav-link">医疗模型上传</router-link></span>
                    </el-menu-item>
                    <el-sub-menu index="2">
                        <template #title>
                        <el-icon><location /></el-icon>
                        <span>可视分析</span>
                        </template>
                        <el-menu-item-group >
                        <el-menu-item index="" style="color:#409EFF">左肾预测精确度展示</el-menu-item>
                        <el-menu-item index="present2">脾脏预测精确度的展示</el-menu-item>
                        <el-menu-item index="present3">肝脏预测精确度的展示</el-menu-item>
                        <el-menu-item index="present4">主动脉预测精确度的展示</el-menu-item>
                        <el-menu-item index="present5">胃预测精确度的展示</el-menu-item>
                        <el-menu-item index="present6">胆囊预测精确度的展示</el-menu-item>
                        <el-menu-item index="present7">下腔静脉预测精确度的展示</el-menu-item>
                        <el-menu-item index="present8">十二指肠预测精确度的展示</el-menu-item>
                        <el-menu-item index="present9">右肾上腺预测精确度的展示</el-menu-item>
                        <el-menu-item index="present10">胰预测精确度的展示</el-menu-item>
                        <el-menu-item index="present11">膀胱预测精确度的展示</el-menu-item>
                        <el-menu-item index="present12">食管预测精确度的展示</el-menu-item>
                        <el-menu-item index="present13">左肾上腺预测精确度的展示</el-menu-item>
                        <el-menu-item index="present14">前列腺/子宫预测精确度的展示</el-menu-item>
                        <el-menu-item index="present15">右肾预测精确度的展示</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    </el-menu>
                </el-col>
                </el-row>
            </el-aside>
            <el-container>
            <el-main>
                <div>
                    <div id="report" style="width: 78vw;height: 30vh;"></div>
                    <div id="report1" style="width: 78vw;height: 59vh;"></div>
                </div>
            </el-main>
            </el-container>
        </el-container>
        </el-container>
    </div>
  </template>
  
  
  <script>
  import NavBar from '@/components/NavBar.vue';
  import 'bootstrap/dist/js/bootstrap.min.js'
  import 'bootstrap/dist/css/bootstrap.css'
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    } from '@element-plus/icons-vue'
  import * as echarts from "echarts";

  
    export default{
        name: 'PresentView1',
        components: {
            NavBar,
        },
        data(){
            return {
                Document,
                IconMenu,
                Location,
                Setting,
                openeds:['2']
            }
        },
        methods: {
            draw(id) {
            this.charts = echarts.init(document.getElementById(id));
            this.charts.setOption({
                title: {
                    text: '左肾预测精确度展示'
                },
                xAxis: {
                    type: 'category',
                    data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40'],
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                {
                    data: [0.96657,
                            0.96688,
                            0.96459,
                            0.96688,
                            0.96746,
                            0.96654,
                            0.96263,
                            0.96672,
                            0.92932,
                            0.96874,
                            0.96137,
                            0.96415,
                            0.96695,
                            0.96099,
                            0.96647,
                            0.9624,
                            0.94567,
                            0.96788,
                            0.96681,
                            0.96807,
                            0.95172,
                            0.96664,
                            0.95357,
                            0.9634,
                            0.95879,
                            0.87069,
                            0.96129,
                            0.96128,
                            0.892,
                            0.95842,
                            0.9582,
                            0.892,
                            0.96209,
                            0.96232,
                            0.96158,
                            0.96118,
                            0.96075,
                            0.95717,
                            0.95729,
                            0.94001,
                            ],
                    type: 'line'
                }
                ],
            });
            },
            draw1(id) {
            this.charts = echarts.init(document.getElementById(id));
            this.charts.setOption({
                legend: {
                    top: 'bottom'
                },
                toolbox: {
                    show: true,
                    feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                        { value: 38, name: '90%以上' },
                        { value: 2, name: '80%-90%' },
                    ]
                    }
                ]
            });
            }
        },
        mounted() {
            this.$nextTick(function() {
            this.draw("report");
            this.draw1("report1");
            });
        }
    }
  </script>